@use './variables.scss' as *;

// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 容器类
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  
  @include respond-to(sm) {
    max-width: var(--container-sm);
  }
  
  @include respond-to(md) {
    max-width: var(--container-md);
  }
  
  @include respond-to(lg) {
    max-width: var(--container-lg);
  }
  
  @include respond-to(xl) {
    max-width: var(--container-xl);
    padding: 0 var(--spacing-xl);
  }
  
  @include respond-to(xxl) {
    max-width: var(--container-2xl);
  }
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-lg);
  
  @include respond-to(xl) {
    padding: 0 var(--spacing-xl);
  }
}

// 网格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--spacing-sm));
}

.col {
  flex: 1;
  padding: 0 var(--spacing-sm);
}

@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 calc(#{$i} / 12 * 100%);
    max-width: calc(#{$i} / 12 * 100%);
    padding: 0 var(--spacing-sm);
  }
  
  @include respond-to(sm) {
    .col-sm-#{$i} {
      flex: 0 0 calc(#{$i} / 12 * 100%);
      max-width: calc(#{$i} / 12 * 100%);
    }
  }
  
  @include respond-to(md) {
    .col-md-#{$i} {
      flex: 0 0 calc(#{$i} / 12 * 100%);
      max-width: calc(#{$i} / 12 * 100%);
    }
  }
  
  @include respond-to(lg) {
    .col-lg-#{$i} {
      flex: 0 0 calc(#{$i} / 12 * 100%);
      max-width: calc(#{$i} / 12 * 100%);
    }
  }
  
  @include respond-to(xl) {
    .col-xl-#{$i} {
      flex: 0 0 calc(#{$i} / 12 * 100%);
      max-width: calc(#{$i} / 12 * 100%);
    }
  }
}

// 间距实用类
$spacing-sizes: ('xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl');

@each $size in $spacing-sizes {
  .m-#{$size} { margin: var(--spacing-#{$size}); }
  .mt-#{$size} { margin-top: var(--spacing-#{$size}); }
  .mr-#{$size} { margin-right: var(--spacing-#{$size}); }
  .mb-#{$size} { margin-bottom: var(--spacing-#{$size}); }
  .ml-#{$size} { margin-left: var(--spacing-#{$size}); }
  .mx-#{$size} { margin-left: var(--spacing-#{$size}); margin-right: var(--spacing-#{$size}); }
  .my-#{$size} { margin-top: var(--spacing-#{$size}); margin-bottom: var(--spacing-#{$size}); }
  
  .p-#{$size} { padding: var(--spacing-#{$size}); }
  .pt-#{$size} { padding-top: var(--spacing-#{$size}); }
  .pr-#{$size} { padding-right: var(--spacing-#{$size}); }
  .pb-#{$size} { padding-bottom: var(--spacing-#{$size}); }
  .pl-#{$size} { padding-left: var(--spacing-#{$size}); }
  .px-#{$size} { padding-left: var(--spacing-#{$size}); padding-right: var(--spacing-#{$size}); }
  .py-#{$size} { padding-top: var(--spacing-#{$size}); padding-bottom: var(--spacing-#{$size}); }
}

// 文本实用类
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-info { color: var(--info-color); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

.font-thin { font-weight: var(--font-weight-thin); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

.truncate {
  @include text-truncate;
}

.text-clamp-1 {
  @include text-clamp(1);
}

.text-clamp-2 {
  @include text-clamp(2);
}

.text-clamp-3 {
  @include text-clamp(3);
}

// 背景实用类
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.bg-red { background-color: var(--primary-color); }
.bg-orange { background-color: var(--secondary-color); }
.bg-green { background-color: var(--success-color); }
.bg-blue { background-color: var(--info-color); }

// 边框实用类
.border { border: 1px solid var(--border-color); }
.border-t { border-top: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }

.border-light { border-color: var(--border-light); }
.border-dark { border-color: var(--border-dark); }

.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

// 阴影实用类
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

// Flex 实用类
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

// 定位实用类
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

// 显示/隐藏实用类
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

// 响应式显示实用类
@include respond-below(sm) {
  .hidden-xs { display: none; }
}

@include respond-to(sm) {
  .visible-sm { display: block; }
  .hidden-sm { display: none; }
}

@include respond-to(md) {
  .visible-md { display: block; }
  .hidden-md { display: none; }
}

@include respond-to(lg) {
  .visible-lg { display: block; }
  .hidden-lg { display: none; }
}

@include respond-to(xl) {
  .visible-xl { display: block; }
  .hidden-xl { display: none; }
}

// 过渡动画实用类
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }

// 交互状态
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-sm);
  
  &:hover {
    background: var(--border-dark);
  }
}

// 加载状态
.loading {
  pointer-events: none;
  opacity: 0.6;
  
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 卡片样式
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  
  &:hover {
    box-shadow: var(--shadow-md);
  }
  
  .card-header {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    
    .card-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--text-primary);
      margin-bottom: var(--spacing-xs);
    }
    
    .card-subtitle {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
    }
  }
  
  .card-body {
    padding: var(--spacing-xl);
  }
  
  .card-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--border-light);
    background: var(--bg-secondary);
  }
}

// 剪纸主题专用样式
.paper-cutting-theme {
  .page-title {
    position: relative;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-align: center;
    padding: var(--spacing-2xl) 0;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    }
    
    &::before {
      left: calc(50% - 120px);
    }
    
    &::after {
      right: calc(50% - 120px);
    }
  }
  
  .section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    margin: var(--spacing-4xl) 0;
  }
  
  .traditional-pattern {
    background-image: 
      repeating-linear-gradient(
        45deg,
        var(--primary-color) 0px,
        var(--primary-color) 1px,
        transparent 1px,
        transparent 8px
      );
    opacity: 0.1;
  }
}
